<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Proxy</title>
	</head>
	<body>
		<a src="https://blog.csdn.net/weixin_45780818/article/details/119086711">Proxy</a>
		<script>
			// Reflect 处理Object.defineProperty()带来的一些问题，如重名
			// let num = {
			// 	a: 1,
			// 	b: 2
			// };
			// const no1 = Reflect.defineProperty(num, "c", {
			// 	get() {
			// 		return 3;
			// 	},
			// });
			// console.log("1 step", no1);
			// const no2 = Reflect.defineProperty(num, "c", {
			// 	get() {
			// 		return 4;
			// 	},
			// });
			// console.log("2 step", no2);

			// 源数据
			let person = {
				name: "张三",
				age: 18,
			};

			/*
			vue3  window.Proxy 代理
			1、p 可以映射对person的操作，并且是可监测的
			2、第一个参数是监测的对象，第二个参数是操作(配置)
			*/
			const p = new Proxy(person, {
				// 读取
				get(target, propName) {
					console.log(`读取p中${target[propName]}属性`);
					//   return target[propName];
					return Reflect.get(target, propName);
				},
				// 修改/新增
				set(target, propName, value) {
					// 这段console.log 模拟vue3数据响应式
					console.log(`写p中${target[propName]}属性，更新页面`);
					//   target[propName] = value;
					Reflect.set(target, propName, value);
				},
				//
				deleteProperty(target, propName) {
					console.log(`删p中${target[propName]}属性，更新页面`);
					//   return delete target[propName];
					return Reflect.deleteProperty(target, propName);
				},
			});
		</script>

	</body>
</html>